<script setup lang='ts'>
  import { computed } from 'vue';
  import xmimg from '@/components/xmimg.vue';
  import xmdialog from '@/components/xmdialog.vue';
  import { getAssetsFile } from '@/utils/public';
  const $emit = defineEmits(['update:dialogshow'])
  const props = defineProps({
    dialogshow:{
      type:Boolean,
      default:false
    },
  })
  const show = computed({
    set:(val)=>{
      if(!val) return $emit('update:dialogshow',false)
    },
    get:()=>{
      return props.dialogshow
    }
  })
  const probability = [
    {multiple:'2倍',name:'笨笨龟'},
    {multiple:'4倍',name:'开心狗'},
    {multiple:'7倍',name:'快乐羊'},
    {multiple:'14倍',name:'调皮狐'},
    {multiple:'33倍',name:'顽皮鹿'},
    {multiple:'99倍',name:'爱心猫'},
    {multiple:'99倍',name:'彩虹兽'},
  ]

</script>

<template>
  <xmdialog class="newDialogBack" :close-show="2" v-model:dialogshow="show">
    <template v-slot:titleImg>
      <img :src="getAssetsFile('titleimg4.png')">
    </template>
    <div class="borderColor">
      <div class="fontColor">
        1. 欢迎来到森林狩猎活动玩法，草原中有7种动物，每种动物对应捕捉到的奖励不同，具体奖励如下：
      </div>
      <div class="tableBox">
        <ul class="titleTable flex-align">
          <li>奖励倍数</li>
          <li>对应羊名称</li>
        </ul>
        <ul v-for="item in probability" class="listTable flex-align">
          <li v-for="val of item"> {{ val }}</li>
        </ul>
      </div>
      <div class="fontColor mt10 mb20">2. 森林狩猎投入成本分为三档：1狩猎券、10狩猎券、100狩猎券；在“开始狩猎”前，点击一键清除可撤回投入的狩猎券。</div>
      <div class="fontColor mb20">3. “开始狩猎”后，将公布当局森林狩猎中捕捉到的动物，如果投入了相应的动物，则会获得狩猎奖励。</div>
      <div class="fontColor mb20">4. 狩猎区的顶部为狩猎历史记录，点击可查看历史狩猎记录详情（最多56局）。</div>
      <div class="fontColor">5. 每局设有投入上限：单个动物至多投入1000狩猎券，每一轮狩猎至多投入1000个狩猎券，请合理适度游戏。</div>
    </div>
  </xmdialog>
</template>

<style lang='scss' scoped>
  .newDialogBack {
    .borderColor {
      padding: 16px 11px;
      .fontColor {
        font-size: 12px;
        font-weight: 500;
        color:rgba($color: #fff, $alpha: .8);
        line-height: 18px;
      }
      .mt10 {
        margin-top: 10px;
      }
      .mb20 {
        margin-bottom: 20px;
      }
      .tableBox {
        margin-top: 20px;
        overflow: hidden;
        width: 100%;
        border-radius: 12px;
        border: 1px solid #9DC666;
        border-top: none;
        margin: 15px 0 0;
        li {
          flex: 1;
          text-align: center;
        }
        .titleTable {
          height: 28px;
          background: #9ED9F4;
          border-radius: 12px 12px 0px 0px;
          li {
            color: #04511D;
          }
        }
        .listTable {
          li {
            height: 36px;
            line-height: 36px;
            color: #fff;
            border-bottom: 1px solid #9ED9F4;
            border-right: 1px solid #9ED9F4;
          }
          li:nth-last-child(1) {
            border-right:none;
          }
        }
        .listTable:nth-last-child(1) {
          li{
            border-bottom: none;
          }
        }
      }
    }
  }
</style> 